<template>

  <el-card class="box-card">

      <div class="card" style="background-color: #ffffff" >
        <div class="title">

          <div class="text" style="margin-left: 15px">日程安排与计划</div>

        </div>
        <div  style="width: 100%;margin-top: 10px;">
          <el-calendar :first-day-of-week="7" v-model="date" >
            <template slot="dateCell" slot-scope="{ data }">
              <div slot="reference" @click="updateMemo(data)">
                <p
                  :class="{
                        'can-selected': dealMyDate(data.day).hasMemo,
                        red: dealMyDate(data.day).memoLevel / 1 == 1,
                        blue: dealMyDate(data.day).memoLevel / 1 == 2,
                        green: dealMyDate(data.day).memoLevel / 1 == 3,

                      }"
                >
                      <span class="num">
                        {{ data.day.split('-').slice(1)[1] }}
                      </span>
<!--                   <span>{{dealMyDate(data.day)}}</span>-->
                </p>
              </div>
            </template>
          </el-calendar>
        </div>
        <div class="memorandumTop" style="background-color: #ffffff;display: flex;flex-direction: row;width: 100%">
          <div class="memorandumTitle" style="background-color: #ffffff;display: flex;flex-direction: row; margin-left: 15px; width:50%">
            <div class="img">
              <i class="el-icon-date"></i>
            </div>
            <div class="memorandumText" >备忘</div>
          </div>
          <div @click="dialogVisible = true" class="create" style="background-color: #ffffff;display: flex;flex-direction: row; margin-left: 75%; width: 50%">
            <div class="plus">+</div>
            <div class="text">新建</div>
          </div>
        </div>
        <div class="memorandumListContainer" style="background-color: #ffffff;display: flex;flex-direction: row;font-size: 14px;">
          <div :key="item.id" class="listItem" v-for="item in memorandumList">
            <div class="type">
              <div
                class="unimportantPoint"
                v-if="item.memoLevel == '3'"
              ></div>
              <div class="normalPoint" v-if="item.memoLevel == '2'"></div>
              <div class="importantPoint" v-if="item.memoLevel == '1'"></div>
            </div>
            <div class="text">{{ item.memoContent }}</div>
          </div>
          <div v-if="memorandumList.length == 0" style="margin-left: 20px;margin-top: 10px;">暂未查询到备忘录</div>
        </div>

        <div style="background-color: #ffffff">
          <el-pagination
            :current-page="memorandumCurrentPage"
            :page-size="memorandumPageSize"
            :page-sizes="[10, 20, 30, 40]"
            :total="memorandumTotal"

            background
            layout="total, prev, pager, next, sizes, jumper"
          ></el-pagination>
        </div>
      </div>

  </el-card>



</template>

<script>
  import { timestampToTime } from '@/api/formatDate'
  import {
    getMemoList,
    addMemo,
    editMemo,
    delMemo
  } from '@/api/home/home' //请求接口的api
  export default {
    data() {
      return {
        date: new Date(),
        chooseDay: '',
        saveMothData: [],
        memorandumList: [],
        memorandumCurrentPage: 1,
        memorandumPageSize: 10,
        memorandumTotal: 0
      }
    },
    created() {
      this.$nextTick(() => {
        // 点击上个月
        let prevBtn1 = document.querySelector(
          '.el-calendar__button-group .el-button-group>button:nth-child(1)'
        )
        prevBtn1.addEventListener('click', () => {
          let str = timestampToTime(this.date)
          str = str.substring(0, 7)
          const param = {
            // pageNum: this.memorandumCurrentPage,
            pageNum: 1,
            pageSize: this.memorandumPageSize,
            param: {
              month: str,
              emplId: this.emplId
            }
          }
          this.queryMemoList(param, true)
        })
        // 点击今天
        let prevBtn2 = document.querySelector(
          '.el-calendar__button-group .el-button-group>button:nth-child(2)'
        )
        prevBtn2.addEventListener('click', () => {
          console.log(this.saveMothData)
          let str = timestampToTime(this.date)
          const param = {
            today: str.substring(0, 10),
            // pageNum: this.memorandumCurrentPage,
            pageNum: 1,
            pageSize: this.memorandumPageSize,
            param: {
              month: str.substring(0, 7),
              emplId: this.emplId
            }
          }
          this.queryMemoList(param, true)
        })
        // 点击下个月
        let prevBtn3 = document.querySelector(
          '.el-calendar__button-group .el-button-group>button:nth-child(3)'
        )
        prevBtn3.addEventListener('click', () => {
          let str = timestampToTime(this.date)
          str = str.substring(0, 7)
          const param = {
            // pageNum: this.memorandumCurrentPage,
            pageNum: 1,
            pageSize: this.memorandumPageSize,
            param: {
              month: str,
              emplId: this.emplId
            }
          }
          this.queryMemoList(param, true)
        })
      })
    },
    mounted() {
      this.queryMemoList(null, true)
    },
    methods: {
      //处理请求回的数据，与日历数据相挂钩
      dealMyDate(v) {
        // console.log(v);
        let len = this.saveMothData.length
        let res = {}
        for (let i = 0; i < len; i++) {
          if (this.saveMothData[i].memoDate == v) {
            res.hasMemo = true
            res.memoLevel = this.saveMothData[i].memoLevel
            res.memoTime = this.saveMothData[i].memoTime
            break
          }
        }
        return res
      },
      //点击日历上每一天更新备忘录列表
      updateMemo(data) {
        this.chooseDay = data.day
        this.memorandumCurrentPage = 1
        const param = {
          pageNum: this.memorandumCurrentPage,
          pageSize: this.memorandumPageSize,
          param: {
            day: data.day,
            emplId: this.emplId
          }
        }
        this.queryMemoList(param)
      },
      //查询备忘录列表
      queryMemoList(data, flag) {
        // console.log(flag);
        var param
        if (data) { //
          param = data
          param.emplId = this.emplId
        } else { //不传data的情况，有可能是初次加载或者不传month也不传day
          param = {
            param: {
              emplId: this.emplId
            },
            pageNum: this.memorandumCurrentPage,
            pageSize: this.memorandumPageSize
          }
        }
        // console.log(param, 'param')
        getMemoList(param).then((res) => {
          // console.log(res);
          if (res.code == 200) {
            this.memorandumList = res.data
            this.memorandumTotal = res.recordsTotal
            if (flag == true) {
              this.saveMothData = res.data
            }
            //如果点击今天按钮，请求当月数据，把当天数据过滤出来，既不影响日历所有圆点，又保证数据正确
            if (
              data &&
              data.today == timestampToTime(new Date()).substring(0, 10)
            ) {
              this.memorandumList = res.data.filter(
                (v) => v.memoDate == data.today
              )
            }
          }
          if (res.data.length == 0) {
            this.$message.success('暂无数据！')
          }
        })
      }
    }
  }

</script>

<style scoped>

.title{
  background-color: #ffffff;
}

.box-card {
  width: 480px;
  margin-top: 5px;
}

.el-calendar-table .el-calendar-day{

  height: 30px;


}

</style>
